import lessModule from "./index.module.less"
import markerUpArrowImage from "../../../../../../../../assets/image/mapComponent-markerUpArrow.png"
import markerDownArrowImage from "../../../../../../../../assets/image/mapComponent-markerDownArrow.png"
import portableImage from "../../../../../../../../assets/image/panoramicMonitoringPage-portable.png"
import { $constantList, $eventBus } from "../../../../../../../../common/utils"
import React, { MutableRefObject, useCallback, useEffect, useState } from "react"
// 主页-全景监控页面-地图组件-站点标记组件
interface componentInerface {
    sourceData: object
    mainIdx: number
}
const HomePage_PanoramicMonitoringPage_MapComponent_SubstationMarkerComponent: React.FC<componentInerface> = (props) => {

    return (
        <div className={lessModule["homePagePanoramicMonitoringPageMapComponentSubstationMarkerComponent"]}>
            <div className={lessModule["homePagePanoramicMonitoringPageMapComponentSubstationMarkerComponent-big"]}
               style={{ backgroundColor: $constantList["stationStatusColor"][props.sourceData["monitorMain"][props.mainIdx]?.["deviceStatus"]??3]}}
            ></div>
            <div className={lessModule["homePagePanoramicMonitoringPageMapComponentSubstationMarkerComponent-small"]} style={{ backgroundColor: $constantList["stationStatusColor"][props.sourceData["monitorMain"][props.mainIdx]?.["deviceStatus"]??3] }}>
                {
                    props.sourceData["monitorMain"][props.mainIdx]?.["dcDirection"] && <img src={props.sourceData["monitorMain"][props.mainIdx]?.["dcDirection"] === "up" ? markerUpArrowImage : markerDownArrowImage} />
                }
            </div>
            {
                props.sourceData["isPortable"] && <img className={lessModule["homePagePanoramicMonitoringPageMapComponentSubstationMarkerComponent-portableImage"]} src={portableImage} />
            }
            <div className={lessModule["homePagePanoramicMonitoringPageMapComponentSubstationMarkerComponent-name"]}>
                <div className={lessModule["homePagePanoramicMonitoringPageMapComponentSubstationMarkerComponent-name__text"]}>{props.sourceData["stationName"]}</div>
            </div>
        </div>
    )
}
export default HomePage_PanoramicMonitoringPage_MapComponent_SubstationMarkerComponent